<template>
  <view class="address-list" v-if="$store.state.user.address !== []">
    <view class="address-list-items" v-for="(item, index) in $store.state.user.address" :key="index">
      <view class="address-item">
        <view class="address-item-info" v-if="item.consigneeRegion" @click="addressSelected(item)"> 
          <view class="label-icon">
            <text class="label-icon-title" v-if="item.labelName === '家'">家</text>
            <text class="label-icon-title" v-if="item.labelName === '公司'">司</text>
            <text class="label-icon-title" v-if="item.labelName === '学校'">校</text>
          </view>
            <view class="my-address-info">
              <view class="address-name">
                <text>{{item.consigneeRegion}} </text>
                <view class="address-default" v-if="item.switchShow">
                  <text>默认</text>
                </view>
              </view>
              <view class="user-info">
                <text class="user-name">{{item.consigneeName}}</text>
                <text class="user-phone">
                {{item.phone}}
                </text>
              </view>
            </view>  
        </view> 
        <view class="address-edit" v-if="item.consigneeRegion">
          <text class="address-edit-text" @click="editBtn(item, index)">编辑</text>
        </view>
      </view>
    </view>
  <view class="add-my-address">
    <button type="primary" @click="addAddressBtn">新增地址</button>
  </view>
  </view>
</template>

<script setup>
  import {ref} from 'vue'
  const defAddress = ref(0)
  const editBtn = (item,index) => {
    uni.navigateTo({
      url: `/subpkg/redact-address/redact-address?addressInfo=${encodeURIComponent(JSON.stringify(item))}&id=${index}`
    })
  }
  const addAddressBtn = () => {
    uni.navigateTo({
      url: '/subpkg/redact-address/redact-address'
    })
  }
  const addressSelected = (item) => {
    let pages = getCurrentPages() 
    let prevPage = pages[pages.length -2]
    prevPage.onLoad(item)
    uni.navigateBack({
         delta: 1 // 返回的页面数
     })
  }
</script>

<style lang="scss">
.address-list {
  padding:0 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  padding-bottom: 100rpx;
  .address-list-items {
    .address-item {
      display: flex;
      justify-content: space-between;
      align-items:center;
      height: 100rpx;
      margin: 20rpx 0 ;
      border-bottom: 1rpx solid #f5f5f5;
      .address-item-info {
        display: flex;
        align-items: center;
        .label-icon {
          width: 50rpx;
          height: 50rpx;
          text-align: center;
          color: #fff;
          border-radius: 50%;
          background-color: #67de75;
          margin-right: 10rpx;
        }
        .my-address-info {
          .address-name {
            display: flex;
            .address-default {
              width: 80rpx;
              height: 40rpx;
              line-height: 40rpx;
              font-size: 25rpx;
              color: #fff;
              text-align: center;
              border-radius: 10rpx;
              margin-left: 10rpx;
              background-color: #ffca28;
            }
          }
          .user-info {
            font-size: 30rpx;
            color: #999;
            margin-top: 10rpx;
            margin-bottom: 10rpx;
            .user-name {
              margin-right: 10rpx;
            }
          }
        }
        
      }
     
    }
  }
  .add-my-address {
    position: fixed;
    bottom: 0;
    width: 90%;
    height: 100rpx;
  }
}
</style>
